import React from 'react'

import { connect } from 'react-redux'
import {NavLink, withRouter} from 'react-router-dom'

import './BottomBar.scss'
// import { changeTab } from '../actions/tabAction.js'

class BottomBar extends React.Component {
    changeTab(item) {
        this.props.history.replace(item.key)
        // this.props.dispatch(changeTab({
        //     activeKey: item.key
        // }))
    }
    renderItems() {
        let tabs = this.props.tabs
        console.log(this.props)

        return tabs.map((item, index) => {
            let cls = item.key + ' tab-item'
            let name = item.name

            // if (item.key === this.props.activeKey) {
            //     cls += ' active'
            // }
            return (
                <NavLink key={index} className={cls} replace={true} to={'/' + item.key} selected='active' onClick={() => this.changeTab(item)}>
                    <div className="tab-icon"></div> 
                    <div className="btn-name">{name}</div> 
                </NavLink>
            )
        })
    }
    render() {
        return ( 
            <div className='bottom-bar'> 
                {this.renderItems()} 
            </div>
        )
    }
}

export default withRouter(connect(
    state => ({
        tabs: state.tabReducer.tabs,
        activeKey: state.tabReducer.activeKey
    })
)(BottomBar))